<script setup lang="ts">
import _ from 'lodash';
import type { TimeWeather, NextWeekWeather, CurrentWeather } from '@/types';
import CityWeather from '@/components/cityWeather/index.vue';
import { useHistoryStore } from '@/store/modules/history';
import useWeather from '@/hooks/useWeather';

const historyStore = useHistoryStore();

const currentWeather = ref<CurrentWeather>({});
const timeWeatherArr = ref<TimeWeather[]>([]);
const nextWeekWeatherArr = ref<NextWeekWeather[]>([]);

const keyword = ref<string>('');
const searchKeyword = ref<string>('');
const popShow = ref<boolean>(false);

// 回车查询搜索城市天气，如果查询成功，弹出pop
const locationSearch = async (val: string) => {
  if (val === searchKeyword.value) {
    return (popShow.value = true);
  }
  // 保存上次的搜索的关键字，如果两次不一样，清空数据
  currentWeather.value = {};
  timeWeatherArr.value = [];
  nextWeekWeatherArr.value = [];
  searchKeyword.value = '';
  let res = await useWeather(val);
  searchKeyword.value = val;
  currentWeather.value = res.current;
  timeWeatherArr.value = res.hourArr;
  nextWeekWeatherArr.value = res.weekArr;
  popShow.value = true;
};

// 弹出关闭
const popupClose = () => {
  popShow.value = false;
};

// 添加收藏历史
const addCity = () => {
  historyStore.setHistoryCity(keyword.value);
  searchCityArr.value.push({
    city: keyword.value,
    weather: currentWeather.value.weather,
    temperature: currentWeather.value.currentTemperature + '℃',
    minTemperature: currentWeather.value.minTemperature + '℃',
    maxTemperature: currentWeather.value.maxTemperature + '℃'
  });
  keyword.value = '';
  popupClose();
};

const searchCityArr = ref<any[]>([]);
const getSaveCityWeather = async () => {
  const promises = _.map(historyStore.addCityArr, (item) => useWeather(item));
  const res = await Promise.all(promises);
  searchCityArr.value = _.map(res, (item) => {
    return {
      city: item.city,
      weather: item.current.weather,
      temperature: item.current.currentTemperature + '℃',
      minTemperature: item.current.minTemperature + '℃',
      maxTemperature: item.current.maxTemperature + '℃'
    };
  });
};
// 点击查看城市天气详情
const toViewCityWeather = (city: string) => {
  uni.redirectTo({
    url: `/pages/index/index?city=${city}`
  });
};
onLoad(() => {
  getSaveCityWeather();
});
</script>
<template>
  <view class="p30">
    <u-search
      :clearabled="true"
      v-model="keyword"
      :showAction="false"
      placeholder="搜索城市"
      bgColor="#fff"
      borderColor="#ccc"
      @search="locationSearch"
    ></u-search>

    <view class="history-list">
      <view
        class="history-list-item"
        v-for="item in searchCityArr"
        :key="item.city"
        @click="toViewCityWeather(item.city)"
      >
        <view class="f-s-c mb20">
          <view>
            <view v-if="item.city === historyStore.currentCity" class="f600 fs34 mb10">我的位置</view>
            <view :class="item.city !== historyStore.currentCity ? 'f600' : ''">{{ item.city }}</view>
          </view>
          <view class="fs42 f600">{{ item.temperature }}</view>
        </view>
        <view class="f-s-c fs28">
          <view>{{ item.weather }}</view>
          <view class="f-c">
            <text class="mr20">最低{{ item.minTemperature }}</text>
            <text>最高{{ item.maxTemperature }}</text>
          </view>
        </view>
      </view>
    </view>

    <u-popup :show="popShow" mode="bottom" @close="popupClose" :round="20">
      <view class="f-s-c" style="padding: 20rpx 30rpx 0rpx 30rpx">
        <text @click="popupClose">取消</text>
        <text @click="addCity">添加</text>
      </view>
      <view class="p30 cityWeather">
        <CityWeather
          :timeWeatherArr="timeWeatherArr"
          :nextWeekWeatherArr="nextWeekWeatherArr"
          :currentCity="keyword"
          :currentWeather="currentWeather"
        />
      </view>
    </u-popup>
  </view>
</template>
<style lang="scss" scoped>
.history-list {
  margin-top: 20px;
  &-item {
    padding: 20rpx;
    border: 1px solid #ccc;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.cityWeather {
  max-height: 1000rpx;
  overflow-y: auto;
}
</style>
